<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>选课</title>
    <link href="../../teacher/bootstrap5/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;


    }

    html,
    body {
        min-width: 1000px;
        height: 100%;
        background: url('image/bg1.jpg') no-repeat;



    }

    .content {
        margin: 20px 100px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 2px;
    }

    .head-list {
        list-style-type: none;
        display: flex;
        align-items: center;
        justify-content: left;
        height: 50px;

        background: rgb(52, 73, 93);
    }
    .head-list li:nth-child(4){
        flex-grow: 2;
        margin-left: 550px;
    }

    .head-list li {
        margin-left: 40px;
    }

    .head-list li a {
        text-decoration: none;
        color: #fff;
    }

    .head-list li a:hover {
        color: rgb(229, 229, 229);
    }

    /* 标题 */
    .title {
        margin-left: 20px;
        color: rgb(52, 73, 93);
        font-size: 30px;
        font-weight: 700;
    }

    /* 搜索框 */
    .search{
        margin: 20px;
        display: flex;
        flex-wrap: nowrap;
    }
    .search-a{
        flex: 1;
    }
    .search-b{
        flex: 2;
    }
    .search-b input{
        width: 400px;
        height: 40px;
        padding-left:10px;
    }
    /*.search-b input::placeholder{*/
    /*    text-indent: 10px;*/

    /*}*/
    .search-b button{
        width: 60px;
        height: 40px;
        background-color: rgba(206,224,237,0.7);

    }
    #select{
        width: 200px;
        height: 40px;
        background-color: rgba(206,224,237,0.7);

    }
    /* 整体搜索框边边公共样式 */
    #select,.search-b input,.search-b button{
        border-radius:5px ;

        border-color: rgb(229,229,229);

        outline: none;
    }


/*    表格斑马纹*/
/*    tbody tr:nth-child(2n+1){*/
/*        background-color: rgba(0,0,0,0.1);*/
/*    }*/

      tr:hover{
          background-color: rgba(0,0,0,0.1);

      }

</style>

<body>

    <ul class="head-list">
        <li><a href="http://localhost/student?page=1&size=7&username=#(account)">选课界面</a></li>
        <li><a href="http://localhost/student/selectCourse?page=1&size=7&username=#(account)">选课详情</a></li>
        <li><a href="http://localhost/all/student/update.html?page=1&size=7&username=#(account)">修改密码</a></li>
        <li><span style="color: #fff">学号:</span><span style="color: rgb(139,218,229)">#(account)</span></li>

    </ul>



    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="content">
        <div class="title">选课界面</div>
        <div class="search">
            <div class="search-a">
                <select name="分类" id="select">
                    <option value="id">教师号</option>
                    <option value="name">姓名</option>
                    <option value="subject">学科</option>

                </select>
            </div>
            <div class="search-b">
                
                <input id="inputSearch" type="text" placeholder="输入值">
                <button id="search">查询</button>
            </div>
        </div>
<!--        <div style="float: right">-->
<!--            <button type="button" onclick="window.location.href=-->
<!--            'http://localhost/student/update.html?username='+'#(account)'" class="btn btn-secondary">修改密码</button>-->
<!--        </div>-->


        <table class="table">
            <thead>
                <tr>
                    <!--        <th scope="col">#</th>-->
                    <th scope="col">教师号</th>
                    <th scope="col">姓名</th>
                    <th scope="col">学科</th>
                    <th scope="col">选择课程</th>
                </tr>
            </thead>
            <tbody>
                #for(teacher:teachers)
                <tr>

                    <td>
                        #(teacher.id)
                    </td>
                    <td>
                        #(teacher.name)
                    </td>
                    <td>
                        #(teacher.subject)
                    </td>
                    <td>

                        <button class="btn btn-success" onclick="window.location.href=
            'http://localhost/student/select?teacherId='+'#(teacher.id)'+'&page='+'#(page)'
            +'&size='+'#(size)'+'&account='+'#(account)'" type="button" id="add">选它</button>

                    </td>
                </tr>
                #end
            </tbody>
        </table>

        <nav aria-label="Page navigation example">
            <ul class="pagination">



                #for( i=1;i<=totalPage;i++)
                <li class="page-item"><a class="page-link" href="http://localhost/student?page=#(i)&size=7&username=#(account)">#(i)</a></li>
                #end


                <li class="page-item"><a class="page-link"
                        >总条数:#(total)</a></li>
            </ul>
        </nav>



<!--        <button type="button"-->
<!--            onclick="window.location.href='http://localhost/student/selectCourse?username='+'#(account)'"-->
<!--            class="btn btn-primary">选课详情</button>-->

    </div>

<script>
    $(function () {
            $('#search').on('click', function () {
                //获取登陆的账号和密码
                var content = $('#inputSearch').val();
                //进行ajax请求发送数据到后端进行验证
                $.get('http://localhost/student/search', {
                    content: content
                }, function (res) {
                    // alert("修改成功,请重新登陆")
                     window.location.href = 'http://localhost/student/search?content='+content;
                })
            })
        }
    )
</script>
</body>


</html>